<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#container {
  --a: green;
}

#b {
  --a: inherit;
}

</style>

<div id="container">
  <div id="a" style="--a: inherit;"></div>
  <div id="b"></div>
</div>

<script>
test(function() {
  assert_equals(getComputedStyle(container).getPropertyValue("--a"), " green");
  assert_equals(getComputedStyle(a).getPropertyValue("--a"), " green");
  assert_equals(a.style.getPropertyValue("--a"), "inherit");
  assert_equals(a.style.cssText, "--a: inherit;");
}, 'The special inherit value can be read from inline style.');

test(function() {
  a.style.setProperty("--a", "inherit");
  assert_equals(a.style.getPropertyValue("--a"), "inherit");
}, 'The special inherit value can be read after setting.')

test(function() {
  assert_equals(document.styleSheets[0].rules[1].style.getPropertyValue("--a"), "inherit");
}, 'The special inherit value can be read from a declared rule.')
</script>
